<script setup lang="ts">

import {BsFileEarmarkText, BsPerson} from "vue-icons-plus/bs";
import {RiCompassDiscoverFill} from "vue-icons-plus/ri";
import {AiOutlineHome} from "vue-icons-plus/ai";
import {BiSolidDownArrow, BiSolidRightArrow} from "vue-icons-plus/bi";
import { ref, onMounted } from 'vue';
import { UserApi } from "@/api";

const notPayOrders = ref([
  {
    name: '万家饺子(软件园E18店)',
    price: 43,
    showDetails: false,
    items: [
      { name: '纯肉鲜肉（水饺）', quantity: 2, price: 14 },
      { name: '玉米鲜肉（水饺）', quantity: 1, price: 12 },
      { name: '配送费', quantity: 1, price: 3 },
    ],
  },
  {
    name: '小锅饭豆腐馆(全运店)',
    price: 23,
    showDetails: false,
    items: [
      { name: '豆花', quantity: 4, price: 8 },
      { name: '荤豆花', quantity: 1, price: 12 },
      { name: '配送费', quantity: 1, price: 3 },
    ],
  },
]);

const PayedOrders = ref([
  {
    name: '万家饺子(软件园E18店)',
    price: 29,
    showDetails: false,
    items: [
      { name: '纯肉鲜肉（水饺）', quantity: 1, price: 14 },
      { name: '玉米鲜肉（水饺）', quantity: 1, price: 12 },
      { name: '配送费', quantity: 1, price: 3 },
    ],
  },
  {
    name: '小锅饭豆腐馆(全运店)',
    price: 21,
    showDetails: false,
    items: [
      { name: '豆花', quantity: 3, price: 6 },
      { name: '荤豆花', quantity: 1, price: 12 },
      { name: '配送费', quantity: 1, price: 3 },
    ],
  },
]);

const username = ref('');
onMounted(() => {
  const storedUsername = sessionStorage.getItem('username');
  if (storedUsername) {
    username.value = storedUsername;
  }
});

const api = new UserApi();
api.getOrders(username.value)

function togglenotPayOrder(index : number) {
  notPayOrders.value[index].showDetails = !notPayOrders.value[index].showDetails;
}
function togglePayedOrder(index : number) {
  PayedOrders.value[index].showDetails = !PayedOrders.value[index].showDetails;
}
const router = useRouter();
function main(){
  router.push('/main');
}
function  pay(){
  router.push('/pay');
}
</script>

<template>
  <div class="w-full w-full select-none">
    <header class="w-full h-12vw bg-#0097ff  color-#fff text-4.8vw flex justify-center items-center pos-fixed left-0 top-0 z-100">
      <p class=" color-#fff text-4.8vw select-none">我的订单</p>
    </header>
    <h3 class="mt-12vw box-border p-4vw text-3.5vw font-400 color-#999">未支付订单信息</h3>
    <ul class="order">
      <li v-for="(order, index) in notPayOrders" :key="index" @click="togglenotPayOrder(index)">
        <div class="order-info">
          <div class="flex flex-wrap">
            {{ order.name }}
            <BiSolidRightArrow v-if="!order.showDetails" class="w-2.5vw h-2.5vw color-#666 mt-1.5 ml-1.5"></BiSolidRightArrow>
            <BiSolidDownArrow v-if="order.showDetails" class="w-2.5vw h-2.5vw color-#666 mt-1.5 ml-1.5"></BiSolidDownArrow>
          </div>
          <div class="order-info-right">
            <p>&#165;{{ order.price }}</p>
            <div @click="pay" class="order-info-right-i">去支付</div>
          </div>
        </div>
        <ul v-if="order.showDetails" class="order-detailed w-full">
          <li v-for="item in order.items" :key="item.name">
            <p>{{ item.name }} x {{ item.quantity }}</p>
            <p>&#165;{{ item.price }}</p>
          </li>
        </ul>
      </li>
    </ul>
    <h3 class="box-border p-4vw text-3.5vw font-400 color-#999">已支付订单信息</h3>
    <ul class="order">
      <li v-for="(order, index) in PayedOrders" :key="index" @click="togglePayedOrder(index)">
        <div class="order-info">
          <div class="flex flex-wrap">
            {{ order.name }}
            <BiSolidRightArrow v-if="!order.showDetails" class="w-2.5vw h-2.5vw color-#666 mt-1.5 ml-1.5"></BiSolidRightArrow>
            <BiSolidDownArrow v-if="order.showDetails" class="w-2.5vw h-2.5vw color-#666 mt-1.5 ml-1.5"></BiSolidDownArrow>
          </div>
          <div class="order-info-right">
            <p>&#165;{{ order.price }}</p>
          </div>
        </div>
        <ul v-if="order.showDetails" class="order-detailed w-full">
          <li v-for="item in order.items" :key="item.name">
            <p>{{ item.name }} x {{ item.quantity }}</p>
            <p>&#165;{{ item.price }}</p>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="footer w-full h-14vw flex items-center justify-around pos-fixed left-0 bottom-0 border-solid border-t-1px border-#DDD">
      <li @click="main">
        <AiOutlineHome></AiOutlineHome>
        <p>首页</p>
      </li>
      <li>
        <RiCompassDiscoverFill></RiCompassDiscoverFill>
        <p>发现</p>
      </li>
      <li >
        <BsFileEarmarkText class="color-#0097ff"></BsFileEarmarkText>
        <p class="color-#0097ff">订单</p>
      </li>
      <li>
        <BsPerson></BsPerson>
        <p>我的</p>
      </li>
    </ul>
    </div>
</template>

<style scoped>
.order li .order-info{
  box-sizing: border-box;
  padding: 2vw 4vw;
  font-size: 3vw;
  color: #666;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order li .order-info .order-info-right{
  display: flex;
}
.order li .order-info .order-info-right .order-info-right-i{
  background-color: #f90;
  color: #fff;
  padding: 0.3vw;
  border-radius:3px ;
  margin-left: 2vw;
  user-select: none;
  cursor: pointer;
}
.order li .order-detailed li{
  width: 100%;
  box-sizing: border-box;
  padding: 1vw 4vw ;
  color: #666;
  font-size: 2.5vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer{
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor: pointer;
}
.footer li p{
  font-size: 2.8vw;
}
.footer li i{
  font-size: 5vw;
}
</style>